{{extend './layouts/layout.html'}}


{{block 'content'}}
<div class="container-fluid">
  <div class="page-title">
    <h1>用户</h1>
  </div>
  <!-- 有错误信息时展示 -->
  <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
  <div class="row">
    <div class="col-md-4">
      <form id="addUserForm">
        <h2>添加新用户</h2>
        <div class="form-group">
          <label for="email">邮箱</label>
          <input id="email" class="form-control" name="admin_email" type="email" placeholder="邮箱">
        </div>
        <div class="form-group">
          <label for="slug">别名</label>
          <input id="slug" class="form-control" name="admin_slug" type="text" placeholder="slug">
          <p class="help-block">https://example.com/author/<strong>slug</strong></p>
        </div>
        <div class="form-group">
          <label for="nickname">昵称</label>
          <input id="nickname" class="form-control" name="admin_nickname" type="text" placeholder="昵称">
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input id="password" class="form-control" name="admin_pwd" type="text" placeholder="密码">
        </div>
        <div class="form-group">
          <button class="btn btn-primary" type="submit">添加</button>
        </div>
      </form>
    </div>
    <div class="col-md-8">
      <div class="page-action">
        <!-- show when multiple checked -->
        <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th class="text-center" width="80">头像</th>
            <th>邮箱</th>
            <th>别名</th>
            <th>昵称</th>
            <th>状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody id="tempContainer">

        </tbody>
      </table>
    </div>
  </div>
</div>
{{/block}}

{{block 'script'}}
<script id="temp" type="text/html">
  {% each list item %}
  <tr>
    <td class="text-center"><input type="checkbox"></td>
    <td class="text-center"><img class="avatar" src="{% item.admin_pic %}"></td>
    <td>{% item.admin_email %}</td>
    <td>{% item.admin_slug %}</td>
    <td>{% item.admin_nickname %}</td>
    <td>{% item.admin_state %}</td>
    <td class="text-center">
      <a href="post-add.php" class="btn btn-default btn-xs">编辑</a>
      <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
    </td>
  </tr>
  {% /each %}
</script>
<script>
  loadData()

  const $addUserForm = $('#addUserForm')

  // 自动监听表单提交行为，进行表单校验
  // 校验失败，给出提示
  // 校验成功，触发submitHandler事件
  // 校验规则有两种方式 1.写在表单上 2.写在js：如下
  $addUserForm.validate({
    submitHandler: function() {
      addUser()
    },
    rules: { // 属性 name
      admin_email: {
        required: true,
        email: true,
        // 输入或失去焦点时，插件会自动请求 remote 的地址
        // 会把当前输入框的值作为 GET 请求的参数
        // /api/user/check/admin_email?admin_email=xxx
        // 要求返回 true 或 false
        remote: '/api/user/check/admin_email'
      },
      admin_slug: "required",
      admin_nickname: {
        required: true,
        remote: '/api/user/check/admin_nickname'
      },
      admin_pwd: {
        required: true,
        minlength: 6,
        maxlength: 18
      },
      confirm_password: {
        required: true,
        minlength: 5,
        equalTo: "#password"
      }
    },
    messages: {
      admin_email: {
        required: "邮箱不能为空",
        email: "请输入一个正确的邮箱",
        remote: "邮箱已存在"
      },
      admin_slug: "这是必填项",
      admin_nickname: {
        required: "这是必填项",
        remote: "昵称已存在"
      },
      admin_pwd: {
        required: "请输入密码",
        minlength: "密码长度不能小于 6 个字符",
        maxlength: "密码长度不能大于 18 个字符",
      },
      confirm_password: {
        required: "请输入密码",
        minlength: "密码长度不能小于 5 个字符",
        equalTo: "两次密码输入不一致"
      }
    }
  });

  function loadData() {
    $.ajax({
      url: '/api/user',
      type: 'get',
      data: {},
      dataType: 'json',
      success: (res) => {
        console.log('loadDataRes---', res)
        const htmlStr = template('temp', res.data)
        $('#tempContainer').html(htmlStr)
      },
      error: (err) => {
        console.log(err)
      }
    })
  }

  // 添加新用户
  function addUser() {
    const formData = $addUserForm.serialize()
    console.log('formData---', formData)
    $.ajax({
      url: '/api/user/add',
      type: 'post',
      data: formData,
      dataType: 'json',
      success: (res) => {
        console.log('addUserRes---', res)
        if (res.success) {
          alert(res.msg)
          loadData()
          $addUserForm.find('input').val()
        } else {
          alert(res.msg)
        }
      },
      error: (err) => {
        console.log(err)
      }
    })
    return false
  }
</script>
{{/block}}